<template>
  <!-- 顶部区域 -->
  <div class="header">
    <Breadcrumb></Breadcrumb>
    <div class="form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="预定编号">
          <el-input v-model="formInline.name" placeholder="产品名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="预定时间">
          <el-date-picker v-model="formInline.date" type="date" placeholder="选择日期" size="small">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="group">
      <download-excel 
      class="export-excel-wrapper" 
      :data="DetailsForm" 
      :fields="json_fields" 
      :header="title" name="xxx公司订单列表.xls">
        <el-button size="small" type="warning">导出Excel</el-button>
      </download-excel>
    </div>

    <!--表格区域  -->
    <div class="content">
      <el-table :data="tableData" @select="select" style="width: 100%" header-row-class-name="activeHeader">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="orderNum" label="汇总单编号">
        </el-table-column>
        <el-table-column prop="operator" label="汇总人">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column prop="time" label="汇总时间">
          <template slot-scope="scope">
            {{dayjs(scope.row.yudingTime).format('YYYY-MM-DD-HH-mm-ss')}}
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="汇总订单总价格">
        </el-table-column>
        <el-table-column label="操作">
         <template slot-scope="scope">
          <el-button 
          size="mini" 
          type="danger"
          @click="handleEdit(scope.$index, scope.row)">撤销汇总</el-button>
         </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <Pagination :total=" total" :pageSize="pageSize" @CurrentChange="CurrentChange"></Pagination>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination/Pagination.vue'
export default {
  components: { Pagination },
  data() {
    return {
      formInline: {},
      tableData: [],
      total: 10,
      pageSize: 1,
      DetailsForm: [],//需要导出的数据 [{},{}]
      json_fields: {//映射字段值
        // "汇总单编号": 'orderNum',
        //数字处理--
        "汇总单编号": {
          field: "orderNum",
          callback: value => {
            return '&nbsp;' + value;
          }
        },
        "汇总人": 'operator',
        "电话": 'phone',
        "汇总时间": 'time',
        "汇总订单总价格": 'totalPrice',
      },
      title: 'xxx公司采购系统订单列表',//
    }
  },
  methods: {
    dayjs,
    //获取分页
    CurrentChange() {

    },
     //选中勾选内容
     select(selection, row) {
      console.log(selection, row);
      // //存储当前的勾选的数据信息
      this.DetailsForm = selection;
    },
    //撤销汇总
    handleEdit(index,row){
      this.$api.cancel({id:row.id})
      .then(res=>{
        if(res.data.status==200){
          this.$confirm('撤销该汇总, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("撤销成功",res.data);
          this.collect(1)
          this.$message({
            type: 'success',
            message: '撤销成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });          
        });
        }
      })
    },
    //获取汇总清单列表
    async collect(page){
      let res = await this.$api.collect({page})
      console.log('获取汇总清单列表',res.data);
      if(res.data.status==200){
        this.tableData=res.data.data;
        this.total=res.data.total;
        this.pageSize=res.data.pageSize
      }else{
        this.tableData=[];
        this.total=0;
        this.pageSize=1;
      }
    },
  },
  created(){
    this.collect()
  }
}
</script>

<style lang="less" scoped>
.header {
  background-color: #fff;
  margin-bottom: 20px;
  padding: 10px;
  .el-form-item {
    margin-bottom: 15px;
  }
  .group {
    border: 1px solid #fff;
    padding: 7px;
  }
}
.content {
  background-color: #fff;
  /deep/ .activeHeader {
    color: black;
    text-align: center;
  }
  .Pagination {
    padding: 10px;
  }
}
</style>